<!--
 * @Date: 2023-03-24 11:02:52
 * @LastEditTime: 2023-04-28 17:20:29
-->
<template>
  <div class="home">
    <div class="left">
      <div class="top-btns">
        <a-input v-model:value="searchValue" placeholder="搜索" />
        <a-button class="add">+</a-button>
      </div>
      <a-tree
        class="draggable-tree"
        draggable
        block-node
        :tree-data="treeData"
        v-model:expandedKeys="expandedKeys"
        :selectedKeys="selectedKeys"
        v-model:auto-expand-parent="autoExpandParent"
        :fieldNames="{ children: 'children', title: 'label', key: 'value' }"
        @expand="onExpand"
        @select="onSelect"
        @drop="onDrop"
        @dragend="dragover"
      >
        <template #title="{ label, type, value, sign }">
          <span
            :class="['title', { hightlight: highlightArr.includes(value) }]"
            >{{ label }}</span
          >
          <a-dropdown :trigger="['click']" @click.stop>
            <a class="ant-dropdown-link">···</a>
            <template #overlay>
              <a-menu @click="onMenuClick">
                <a-menu-item key="2">编辑{{ typeMap[type] }}</a-menu-item>
                <a-menu-item key="1" v-if="type != 2"
                  >添加{{ typeMap[type + 1] }}</a-menu-item
                >
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tree>
    </div>
    <div class="right">
      {{ $details.cpcps.web.login.login[$language] }}
      {{ $details.cpcps.admin.index.aa[$language] }}
      {{ $details.cpcps.web.comon.label[$language] }}

      <!-- <languageSelector :query="query" /> -->
    </div>
  </div>
</template>
<script setup>
import {
  getCurrentInstance,
  reactive,
  ref,
  watch,
  onMounted,
  nextTick,
} from 'vue';
import languageSelector from '../../../packages/languageSelector/index.vue';

const { proxy } = getCurrentInstance();

onMounted(() => {
  getData();
  // console.log(proxy.$details);
});

const treeData = ref([]),
  selectedKeys = ref([]),
  selectedValue = ref({}),
  dataList = reactive([]),
  autoExpandParent = ref(true),
  expandedKeys = ref([]),
  highlightArr = reactive([]),
  searchValue = ref(''),
  typeMap = { 0: '组织', 1: '站点', 2: '管线' },
  query = { project_name: 'cpcps', account_id: 1 };

const getData = () => {
  const data = [
    {
      sign: 'org',
      org_id: 8,
      org_name: '深圳燃气',
      value: 'org8',
      type: 0,
      label: '深圳燃气',
      children: [],
    },
    {
      sign: 'org',
      org_id: 9,
      org_name: '武汉市天然气有限公司',
      value: 'org9',
      type: 0,
      label: '武汉市天然气有限公司',
      children: [
        {
          sign: 'prs',
          prs_id: 120,
          prs_name: '汉阳联东U谷调压箱',
          value: 'prs120',
          label: '汉阳联东U谷调压箱',
          type: 1,
          org_id: 9,
          children: [
            {
              sign: 'gcl',
              gcl_id: 202,
              gcl_name: '01',
              prs_id: 120,
              type: 2,
              value: 'gcl202',
              label: '01',
            },
            {
              sign: 'gcl',
              gcl_id: 203,
              gcl_name: '02',
              prs_id: 120,
              type: 2,
              value: 'gcl203',
              label: '02',
            },
            {
              sign: 'gcl',
              gcl_id: 204,
              gcl_name: '02',
              prs_id: 120,
              type: 2,
              value: 'gcl204',
              label: '02',
            },
          ],
        },
        {
          prs_id: 142,
          prs_name:
            '武汉天然气新益村城中村改造H1地块武汉天然气新益村城中村改造H1地块',
          value: 'prs142',
          label: '武汉天然气新益村城中村改造H1地块',
          org_id: 9,
          type: 1,
          children: [
            {
              gcl_id: 275,
              gcl_name:
                '武汉天然气新益村城中村改造H1地块武汉天然气新益村城中村改造H1地块#',
              prs_id: 142,
              type: 2,
              value: 'gcl275',
              label: '武汉天然气新益村城中村改造H1地块#',
            },
            {
              gcl_id: 276,
              gcl_name: '2#',
              prs_id: 142,
              type: 2,
              value: 'gcl276',
              label: '2#',
            },
          ],
        },
      ],
    },
    // {
    //   org_id: 10,
    //   org_name: '常熟市天然气有限公司',
    //   type: 0,
    //   value: 'org10',
    //   label: '常熟市天然气有限公司',
    //   children: [
    //     {
    //       prs_id: 123,
    //       prs_name: '常熟市天然气有限公司辛庄分输',
    //       type: 1,
    //       value: 'prs123',
    //       label: '常熟市天然气有限公司辛庄分输',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 230,
    //           gcl_name: '辛庄分输站-1',
    //           prs_id: 123,
    //           type: 2,
    //           value: 'gcl230',
    //           label: '辛庄分输站-1',
    //         },
    //         {
    //           gcl_id: 231,
    //           gcl_name: '辛庄分输站-2',
    //           prs_id: 123,
    //           type: 2,
    //           value: 'gcl231',
    //           label: '辛庄分输站-2',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 124,
    //       prs_name: '常熟市天然气有限公司莫城分输站',
    //       type: 1,
    //       value: 'prs124',
    //       label: '常熟市天然气有限公司莫城分输站',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 232,
    //           gcl_name: '莫城分输站1',
    //           prs_id: 124,
    //           type: 2,
    //           value: 'gcl232',
    //           label: '莫城分输站1',
    //         },
    //         {
    //           gcl_id: 233,
    //           gcl_name: '莫城2号调压站',
    //           prs_id: 124,
    //           type: 2,
    //           value: 'gcl233',
    //           label: '莫城2号调压站',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 125,
    //       prs_name: '常熟市天然气有限公司通港路高压撬',
    //       type: 1,
    //       value: 'prs125',
    //       label: '常熟市天然气有限公司通港路高压撬',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 234,
    //           gcl_name: '通港路高压撬1',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl234',
    //           label: '通港路高压撬1',
    //         },
    //         {
    //           gcl_id: 235,
    //           gcl_name: '通港路高压撬2',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl235',
    //           label: '通港路高压撬2',
    //         },
    //         {
    //           gcl_id: 247,
    //           gcl_name: '通港路高压撬3',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl247',
    //           label: '通港路高压撬3',
    //         },
    //         {
    //           gcl_id: 248,
    //           gcl_name: '通港路高压撬4',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl248',
    //           label: '通港路高压撬4',
    //         },
    //         {
    //           gcl_id: 249,
    //           gcl_name: '通港路高压撬5',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl249',
    //           label: '通港路高压撬5',
    //         },
    //         {
    //           gcl_id: 250,
    //           gcl_name: '通港路高压撬6',
    //           prs_id: 125,
    //           type: 2,
    //           value: 'gcl250',
    //           label: '通港路高压撬6',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 126,
    //       prs_name: '常熟市天然气有限公司梅李分输站',
    //       type: 1,
    //       value: 'prs126',
    //       label: '常熟市天然气有限公司梅李分输站',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 236,
    //           gcl_name: '梅李分输站-1#',
    //           prs_id: 126,
    //           type: 2,
    //           value: 'gcl236',
    //           label: '梅李分输站-1#',
    //         },
    //         {
    //           gcl_id: 237,
    //           gcl_name: '梅李分输站-2#',
    //           prs_id: 126,
    //           type: 2,
    //           value: 'gcl237',
    //           label: '梅李分输站-2#',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 127,
    //       prs_name: '常熟市天然气公司次高压调压站',
    //       type: 1,
    //       value: 'prs127',
    //       label: '常熟市天然气公司次高压调压站',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 238,
    //           gcl_name: '次高压调压站-1#',
    //           prs_id: 127,
    //           type: 2,
    //           value: 'gcl238',
    //           label: '次高压调压站-1#',
    //         },
    //         {
    //           gcl_id: 239,
    //           gcl_name: '次高压调压站-2#',
    //           prs_id: 127,
    //           type: 2,
    //           value: 'gcl239',
    //           label: '次高压调压站-2#',
    //         },
    //         {
    //           gcl_id: 240,
    //           gcl_name: '次高压调压站-3#',
    //           prs_id: 127,
    //           type: 2,
    //           value: 'gcl240',
    //           label: '次高压调压站-3#',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 128,
    //       prs_name: '常熟市天然气市区撬装分输站',
    //       type: 1,
    //       value: 'prs128',
    //       label: '常熟市天然气市区撬装分输站',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 241,
    //           gcl_name: '市区撬装分输站主路',
    //           prs_id: 128,
    //           type: 2,
    //           value: 'gcl241',
    //           label: '市区撬装分输站主路',
    //         },
    //         {
    //           gcl_id: 242,
    //           gcl_name: '市区撬装分输站备路',
    //           prs_id: 128,
    //           type: 2,
    //           value: 'gcl242',
    //           label: '市区撬装分输站备路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 129,
    //       prs_name: '常熟天然气公司尚湖',
    //       type: 1,
    //       value: 'prs129',
    //       label: '常熟天然气公司尚湖',
    //       org_id: 10,
    //       children: [
    //         {
    //           gcl_id: 243,
    //           gcl_name: '尚湖1#门站',
    //           prs_id: 129,
    //           type: 2,
    //           value: 'gcl243',
    //           label: '尚湖1#门站',
    //         },
    //         {
    //           gcl_id: 244,
    //           gcl_name: '尚湖2#门站        ',
    //           prs_id: 129,
    //           type: 2,
    //           value: 'gcl244',
    //           label: '尚湖2#门站        ',
    //         },
    //         {
    //           gcl_id: 245,
    //           gcl_name: '尚湖3#门站',
    //           prs_id: 129,
    //           type: 2,
    //           value: 'gcl245',
    //           label: '尚湖3#门站',
    //         },
    //         {
    //           gcl_id: 246,
    //           gcl_name: '尚湖4#门站',
    //           prs_id: 129,
    //           type: 2,
    //           value: 'gcl246',
    //           label: '尚湖4#门站',
    //         },
    //       ],
    //     },
    //   ],
    // },
    // {
    //   org_id: 11,
    //   org_name: '武钢华润',
    //   value: 'org11',
    //   label: '武钢华润',
    //   children: [
    //     {
    //       prs_id: 346,
    //       prs_name: '东湖景园2#',
    //       value: 'prs346',
    //       label: '东湖景园2#',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 578,
    //           gcl_name: '主路',
    //           prs_id: 346,
    //           value: 'gcl578',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 579,
    //           gcl_name: '副路',
    //           prs_id: 346,
    //           value: 'gcl579',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 347,
    //       prs_name: '样春湖畔',
    //       value: 'prs347',
    //       label: '样春湖畔',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 580,
    //           gcl_name: '主路',
    //           prs_id: 347,
    //           value: 'gcl580',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 581,
    //           gcl_name: '副路',
    //           prs_id: 347,
    //           value: 'gcl581',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 348,
    //       prs_name: '华侨城天屿一期',
    //       value: 'prs348',
    //       label: '华侨城天屿一期',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 582,
    //           gcl_name: '主路',
    //           prs_id: 348,
    //           value: 'gcl582',
    //           label: '主路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 349,
    //       prs_name: '园林居',
    //       value: 'prs349',
    //       label: '园林居',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 583,
    //           gcl_name: '主路',
    //           prs_id: 349,
    //           value: 'gcl583',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 584,
    //           gcl_name: '副路',
    //           prs_id: 349,
    //           value: 'gcl584',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 350,
    //       prs_name: '武丰佳园',
    //       value: 'prs350',
    //       label: '武丰佳园',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 585,
    //           gcl_name: '主路',
    //           prs_id: 350,
    //           value: 'gcl585',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 586,
    //           gcl_name: '副路',
    //           prs_id: 350,
    //           value: 'gcl586',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 351,
    //       prs_name: '汉南新天地',
    //       value: 'prs351',
    //       label: '汉南新天地',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 587,
    //           gcl_name: '主路',
    //           prs_id: 351,
    //           value: 'gcl587',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 588,
    //           gcl_name: '副路',
    //           prs_id: 351,
    //           value: 'gcl588',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 352,
    //       prs_name: '七星天兴花园',
    //       value: 'prs352',
    //       label: '七星天兴花园',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 589,
    //           gcl_name: '主路',
    //           prs_id: 352,
    //           value: 'gcl589',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 590,
    //           gcl_name: '副路',
    //           prs_id: 352,
    //           value: 'gcl590',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 353,
    //       prs_name: '奥山世纪城1000',
    //       value: 'prs353',
    //       label: '奥山世纪城1000',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 591,
    //           gcl_name: '主路',
    //           prs_id: 353,
    //           value: 'gcl591',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 592,
    //           gcl_name: '副路',
    //           prs_id: 353,
    //           value: 'gcl592',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 354,
    //       prs_name: '武钢总医院',
    //       value: 'prs354',
    //       label: '武钢总医院',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 593,
    //           gcl_name: '主',
    //           prs_id: 354,
    //           value: 'gcl593',
    //           label: '主',
    //         },
    //         {
    //           gcl_id: 594,
    //           gcl_name: '副路',
    //           prs_id: 354,
    //           value: 'gcl594',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 355,
    //       prs_name: '石化二生活区',
    //       value: 'prs355',
    //       label: '石化二生活区',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 595,
    //           gcl_name: '主路',
    //           prs_id: 355,
    //           value: 'gcl595',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 596,
    //           gcl_name: '副路',
    //           prs_id: 355,
    //           value: 'gcl596',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 356,
    //       prs_name: '绿地香树花城',
    //       value: 'prs356',
    //       label: '绿地香树花城',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 597,
    //           gcl_name: '主路',
    //           prs_id: 356,
    //           value: 'gcl597',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 598,
    //           gcl_name: '副路',
    //           prs_id: 356,
    //           value: 'gcl598',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 357,
    //       prs_name: '冶建花园',
    //       value: 'prs357',
    //       label: '冶建花园',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 599,
    //           gcl_name: '主路',
    //           prs_id: 357,
    //           value: 'gcl599',
    //           label: '主路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 358,
    //       prs_name: '一江璟城',
    //       value: 'prs358',
    //       label: '一江璟城',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 600,
    //           gcl_name: '主路',
    //           prs_id: 358,
    //           value: 'gcl600',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 601,
    //           gcl_name: '副路',
    //           prs_id: 358,
    //           value: 'gcl601',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 359,
    //       prs_name: '奥山世纪城2000',
    //       value: 'prs359',
    //       label: '奥山世纪城2000',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 602,
    //           gcl_name: '主路',
    //           prs_id: 359,
    //           value: 'gcl602',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 603,
    //           gcl_name: '副路',
    //           prs_id: 359,
    //           value: 'gcl603',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //     {
    //       prs_id: 360,
    //       prs_name: '滨江学苑',
    //       value: 'prs360',
    //       label: '滨江学苑',
    //       org_id: 11,
    //       children: [
    //         {
    //           gcl_id: 604,
    //           gcl_name: '主路',
    //           prs_id: 360,
    //           value: 'gcl604',
    //           label: '主路',
    //         },
    //         {
    //           gcl_id: 605,
    //           gcl_name: '副路',
    //           prs_id: 360,
    //           value: 'gcl605',
    //           label: '副路',
    //         },
    //       ],
    //     },
    //   ],
    // },
  ];
  treeData.value = data;
  generateList(data);
};
// 生成搜索列表数据
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const { label, value } = node;
    dataList.push({ key: value, title: label });
    if (node.children) generateList(node.children);
  }
};
watch(searchValue, (newVal, oldVal) => {
  change(newVal, oldVal);
});
// 监听输入框数据变化
const change = (newVal, oldVal) => {
  if (!newVal) highlightArr.length = 0;
  const tempArr = dataList.map((item) => {
    if (newVal && item.title.indexOf(newVal) > -1) {
      highlightArr.push(item.key);
      return getParentKey(item.key, treeData.value);
    }
    return null;
  });

  const expanded = tempArr.filter(
    (item, i, self) => item && self.indexOf(item) === i
  );
  expandedKeys.value = expanded;
  autoExpandParent.value = true;
};
// 获取父级key值（需要根据后端返回的数据字段名更改 【value】字段）
const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item) => item.value === key))
        parentKey = node.value;
      else if (getParentKey(key, node.children))
        parentKey = getParentKey(key, node.children);
    }
  }
  return parentKey;
};
// 选择树结点方法
const onSelect = (key, e) => {
  if (!e.selected) return;
  const { org_id, prs_id, gcl_id } = e.node.dataRef;
  selectedValue.value = { org_id, prs_id, gcl_id };
  selectedKeys.value = key;
};
// 菜单点击
const onMenuClick = ({ key }) => {
  console.log(key);
};
// 展开树
const onExpand = (expandedKeys) => {
  expandedKeys.value = expandedKeys;
  autoExpandParent.value = false;
};
// 拖拽排序
const onDrop = (info) => {
  const dropKey = info.node.key;
  const dragKey = info.dragNode.key;
  const dropPos = info.node.pos.split('-');
  const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
  const data = [...treeData.value];

  const loop = (data, key, callback) => {
    data.forEach((item, index) => {
      if (item.value === key) {
        return callback(item, index, data);
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
    });
  };

  // Find dragObject
  let dragObj;
  loop(data, dragKey, (item, index, arr) => {
    arr.splice(index, 1);
    dragObj = item;
  });
  if (!info.dropToGap)
    // Drop on the content
    loop(data, dropKey, (item) => {
      item.children = item.children || [];
      /// where to insert 示例添加到头部，可以是随意位置
      item.children.unshift(dragObj);
    });
  else if (
    (info.node.children || []).length > 0 &&
    // Has children
    info.node.expanded &&
    // Is expanded
    dropPosition === 1 // On the bottom gap
  )
    loop(data, dropKey, (item) => {
      item.children = item.children || [];
      // where to insert 示例添加到头部，可以是随意位置
      item.children.unshift(dragObj);
    });
  else {
    let ar = [];
    let i = 0;
    loop(data, dropKey, (_item, index, arr) => {
      ar = arr;
      i = index;
    });
    dropPosition === -1
      ? ar.splice(i, 0, dragObj)
      : ar.splice(i + 1, 0, dragObj);
  }
  treeData.value = data;
};
// 编辑树结构
const dragover = (e) => {
  console.log(e.node);
  setTimeout(() => {
    getData();
  }, 1500);
  // 发送修改请求
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  display: flex;

  :deep(.left) {
    width: 16%;
    height: 100%;
    padding: 10px 0 0 10px;
    box-sizing: border-box;
    border-right: 1px solid #f5f5f5;
    position: relative;
    background-color: #ffffff;

    .top-btns {
      height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .add {
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: rgba(0, 0, 0, 0.35);
        border-color: rgba(0, 0, 0, 0.35);

        &:hover {
          color: #40a9ff;
          border-color: #40a9ff;
          background: #fff;
        }

        span {
          width: 32px;
          height: 32px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .ant-tree {
      height: calc(100% - 42px);
      overflow: auto;

      &::-webkit-scrollbar {
        width: 0;
      }

      .ant-tree-node-content-wrapper {
        width: 0;
        flex: 1;
        padding: 0;

        &:hover {
          background-color: unset;
        }

        &.ant-tree-node-selected {
          background-color: unset;

          .title {
            background-color: #bae7ff;
          }
        }

        .ant-tree-title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .title {
            width: calc(100% - 24px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;

            &:hover {
              background-color: #bae7ff;
            }

            &.hightlight {
              border: 1px dashed;
            }
          }
          a.ant-dropdown-link.ant-dropdown-trigger {
            width: 24px;
            height: 24px;
            text-align: center;
            font-size: 24px;
            // position: absolute;
            // right: 0;
            color: rgba(0, 0, 0, 0.25);

            &:hover {
              color: rgba(0, 0, 0, 0.35);
              border: 1px dashed rgba(0, 0, 0, 0.35);
            }
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    position: relative;
    // width: 80%;
  }
}
</style>
